<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h3 id="title">封装模拟 jQuery </h3>
        <ul class="list">
            <li>item_01</li>
            <li>item_02</li>
            <li>item_03</li>
            <li>item_04</li>
            <li>item_05</li>
            <li>item_06</li>
            <li>item_07</li>
            <li>item_08</li>
            <li>item_09</li>
            <li>item_10</li>
        </ul>
        <p>
            <input type="text" class="inp" value="Are you oK....">
        </p>
    </div>

    <script>
        // jquery 通过原生JS封装的操作DOM 的 一个 JS框架   模拟DOM操作(增删改查)

        // 面向过程
        // 获取元素对象
        // 单个元素 直接操作
        // var h3 = document.getElementById("title");
        // h3.innerHTML = "hello world";

        // 多个元素 
        // var lilist = document.querySelectorAll("li");
        // for(var i=0;i<lilist.length;i++){
        //     var ele = lilist[i];
        //     ele.innerHTML = "hello wuhan2107"
        // }

        // var lilist = document.querySelectorAll("li");
        // function setHtml(index,text){   // text 表示需要修改的值
        //     for(var i=0;i<lilist.length;i++){
        //         var ele = lilist[i];
        //         if(i==index){
        //             ele.innerHTML = text 
        //         }
        //     }
        // }
        // setHtml(2,"abc123123123")

        // // 查找元素 
        // function getDom(index){
        //     var lilist = document.querySelectorAll("li");
        //     if(!index){
        //         return lilist[0]   // jquery 查找元素 默认都是找第一个 
        //     }
        //     var dom = [];   //  document.querySelectorAll  jquery是把查出来的元素放到一个数组 
        //     lilist.forEach((item,i)=>{
        //         if(i==index){
        //             dom.push(lilist[index]);  
        //         }
        //     })
        //     return dom;
        // }

        // var dom2 = getDom(2);
        // console.log(dom2)


        // $().html().text().eq().find().attr()
        // 面向对象
        var getEle = {
            eles:document.querySelectorAll(".list li"),
            inp:document.getElementsByClassName("inp")[0],
            setHtml(){

            },
            getDom(){

            },
            // 获取当前元素的  innerHTML没有传参数 
            // 传参数就是设置当前的 innerHTML
            html(text){
                if(arguments.length>= 1){   // 有参数 
                    for(var i=0;i<this.eles.length;i++){
                        var ele = this.eles[i];
                        ele.innerHTML = text;
                    }
                }else{
                    // 没有传参数  
                    return this.eles[0].innerHTML;
                }
            },
            text(arg){
                // textContent 不能输出标签 只能输出文本 
                // innerHTML   可以直接输出文本和标签 
                if(arguments.length>= 1){   // 有参数 
                    for(var i=0;i<this.eles.length;i++){
                        var ele = this.eles[i];
                        ele.textContent = arg;
                    }
                }else{
                    // 没有传参数  
                    return this.eles[0].textContent;
                }
            },
            val(value){
                if(arguments.length>= 1){   // 有参数 
                    this.inp.value = value;
                }else{
                    // 没有传参数  
                    
                    return this.inp.value 
                }
            }
        }

        // getEle.html("<a>Hello wuhan2107</a>");
        // getEle.html()

        // getEle.text("hello 2107");
        // getEle.val("hello - 面向对象 ")
        console.log(getEle.val()) 

    </script>
    
    
</body>
</html>